<script lang="ts" setup name="InitiateHandover">
import { Plus } from '@element-plus/icons-vue'
import { IkingPicker } from 'iking-web-ui'
// import { approvalEndorseForm, endorseFormState } from '../interface'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  formKey: {
    type: Object,
    default: () => {}
  },
  editData: {
    type: Object,
    default: () => null
  }
})
const emits = defineEmits<{
  (e: 'update:visible', bool: boolean): void
  (e: 'dataChange'): void
}>()

const { baseUrl } = useHttpUrl()
const token = useToken()

const showPicker = ref(false)
const initiateForm = ref<any>({
  otherPerson: []
})

const c_type = {
  all: ['dep', 'user', 'role', 'post'],
  user: ['user']
}
const approvalEndorseRef = ref()
const dVisible = ref(false)
const chooseType = ref(c_type.all)
const echoData: Ref<any[]> = ref([])
const menuViewTypes = [
  {
    value: '1',
    label: '在职'
  },
  {
    value: '2',
    label: '离职'
  }
]
const handleClose = () => {
  emits('update:visible', false)
  approvalEndorseRef.value?.resetFields()
}
const handleConfirm = () => {}
watch(
  () => props.visible,
  (bool: boolean) => {
    dVisible.value = bool
  }
)
const handChooseUser = (val?: string | null) => {
  chooseType.value = val ? c_type.user : c_type.all
  echoData.value = val
    ? initiateForm.value.managers
    : initiateForm.value.initiators
  nextTick(() => {
    showPicker.value = true
  })
}
</script>

<template>
  <el-dialog
    v-model="dVisible"
    title="发起新交接"
    draggable
    width="683px"
    class="initiate-handover"
    :close-on-click-modal="false"
    :append-to-body="true"
    @closed="handleClose"
  >
    <el-row>
      <el-col :span="24" class="row-col">被交接人</el-col>
      <el-col :span="12" class="row-col">
        <el-select v-model="initiateForm.menuViewType">
          <el-option
            v-for="item in menuViewTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="12" class="row-col">
        <el-input
          v-model="initiateForm.transferee"
          clearable
          placeholder="请选择发起人"
          :suffix-icon="Plus"
          @click="handChooseUser(null)"
        />
      </el-col>
      <el-col :span="24" class="row-col">交接人</el-col>
      <el-col :span="24" class="row-col">
        <el-input
          v-model="initiateForm.initiatorsName"
          clearable
          placeholder="请选择发起人"
          :suffix-icon="Plus"
          @click="handChooseUser(null)"
        />
      </el-col>
      <el-col :span="24" class="row-col">审批模板</el-col>
      <el-col :span="24" class="row-col">
        <el-select v-model="initiateForm.menuViewType">
          <el-option
            v-for="item in menuViewTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="24" class="row-col">
        待处理审批单 正在等待被交接人处理的审批单
      </el-col>
      <el-col :span="24" class="row-col">
        <el-radio-group v-model="initiateForm.appendType" class="ml-4">
          <el-radio label="auto">自动转交给交接人</el-radio>
          <el-radio label="hand">稍后手动转交</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <template #footer>
      <el-button @click="handleClose"> 取消 </el-button>
      <el-button
        type="primary"
        :loading="initiateForm.loading"
        @click="handleConfirm"
      >
        确认
      </el-button>
    </template>
  </el-dialog>
  <IkingPicker
    ref="refIkingPicker"
    v-model="initiateForm.otherPerson"
    v-model:show="showPicker"
    :api="{
      methods: 'post',
      url: `${baseUrl}/server/component/pick/mix`,
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Authorization': token,
      },
    }"
    :tabs="['group']"
    :choose-type="['user']"
    :type-option="{
      dep: 'DEPT',
      user: 'USER',
      role: 'ROLE',
      post: 'POST',
    }"
    :prop-option="{
      name: 'elementName',
      id: 'elementId',
      type: 'elementType',
    }"
  />
</template>

<style lang="scss">
.initiate-handover {
  .row-col {
    padding: 10px;
  }
}
</style>
